<template>
  <el-dialog
    :title="dTitle"
    :visible.sync="visible"
    width="50%"
    top="10vh"
    :before-close="closeDialog"
  >
    <el-form class="actd-top" :model="ruleForm" ref="ruleForm">
      <el-form-item style="width:30%;margin:0 30px" prop="input">
        <el-input v-model="ruleForm.input" placeholder="团长名称"></el-input>
      </el-form-item>
      <el-form-item style="width:30%;margin:0 30px">
        <el-button @click="clean('ruleForm')">重置</el-button>
        <el-button @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="acrt-mid">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="SalesManName" label="团长名称"></el-table-column>
        <el-table-column prop="SalesManPhone" label="团长手机号"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="setSalesManName(scope.row.SalesManName)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <botpage
    class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
  </el-dialog>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { LoadSalesMan } from "@/request/api";
// import bus from "@/components/homepage/children/bus";

export default {
  components: {
    Botpage,
  },
  mounted() {
    this.getTableDatas();
  },
  methods: {
    setSalesManName(data) {
      console.log(data);
      this.SalesManName = data;
      this.$emit("getusername", this.SalesManName);
      this.closeDialog()
    },
    getTableDatas() {
      LoadSalesMan({
        CustomerId: "1",
        OS: "PC",
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        SreachValues: this.ruleForm.input,
      }).then((res) => {
        this.tableData = res.Data;
        this.currentPage = res.PageIndexs;
        this.PageSize = res.PageCount;
        this.total = res.DataCounts;
      });
    },
    search() {
      this.getTableDatas();
    },
    closeDialog(reload) {
      this.$emit("closeDialog", reload);
    },
    clean(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
  },
  props: {
    dTitle: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        input: "",
      },
      form: {},
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      total: 1,
      SalesManName: "",
    };
  },
  // watch: {
  //   formData(newVal, oldVal) {
  //     console.log(newVal, oldVal);
  //     if (newVal) {
  //       this.form = { ...newVal };
  //     }
  //   }
  // },
};
</script>

<style lang="less" scoped>
.actd-top {
  width: 100%;
  height: 80px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.acrt-mid {
  margin-bottom: 30px;
}
</style>